Accordion Component

This is a reusable MDX component built using the @radix-ui/react-accordion library, which provides a customizable and accessible accordion UI element. The component is designed to be easily integrated into a Docusaurus project, allowing you to include accordions in your Markdown files.

What does this MDX Component do?

The Accordion Component provides a simple and efficient way to display collapsible content sections. When a section is collapsed, it displays only the header (or trigger), and when expanded, it reveals the associated content. This component is particularly useful for presenting large amounts of information in a compact and organized manner, improving the overall user experience.

Copy the Code into Your Components Folder

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"
import { unified } from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import rehype2react from 'rehype-react';

import { cn } from "@site/src/utils"

const processor = unified()
  .use(markdown)
  .use(remark2rehype)
  .use(rehype2react, { createElement: React.createElement });

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-2 font-medium transition-al text-sm hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}>
      {processor.processSync(children).result}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef(
  ({ className, children, ...props }, ref) => {
    const processedChildren = React.Children.toArray(children).map((child) => {
      if (typeof child === 'string') {
        console.log("this is the child processed", child)
        const singleLineString = child.replace(/\\n/g, '\\\\n');
        console.log(processor.processSync(singleLineString).result)
        return processor.processSync(singleLineString).result
      } else {
        return child;
      }
    });
    return (
      <AccordionPrimitive.Content
        ref={ref}
        className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
        {...props}
      >
        <div className={cn("pb-4 pt-0", className)}>{processedChildren}</div>

      </AccordionPrimitive.Content>
    );
  }
);

const DevDocsAccordion = React.forwardRef(({ className, children, ...props }, ref) => (
  <Accordion type="single" collapsible>
    <AccordionItem value="first-accordion-section">
        <AccordionTrigger>{props.title}</AccordionTrigger>
        <AccordionContent>
        {children}
        </AccordionContent>
    </AccordionItem>
</Accordion>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { DevDocsAccordion, Accordion, AccordionItem, AccordionTrigger, AccordionContent }

NPM Libraries and Install Instructions

The Accordion Component relies on the following NPM libraries:

1. @radix-ui/react-accordion: This library provides the core functionality for the accordion UI element.
2. lucide-react: This library is used for rendering the chevron icon in the accordion trigger.
3. unified: A utility library for processing Markdown content.
4. remark-parse: A Remark plugin for parsing Markdown content.
5. remark-rehype: A Remark plugin for converting Markdown to Rehype (HTML-like syntax tree).
6. rehype-react: A Rehype plugin for rendering HTML-like syntax trees as React components.

To install these dependencies, run the following command in your project directory:

npm install @radix-ui/react-accordion lucide-react unified remark-parse remark-rehype rehype-react

Use Component in Your Markdown File

The DevDocsAccordion component is a wrapper around the Accordion and AccordionItem components, which provide the core accordion functionality. It accepts a title prop for the accordion trigger and renders the children as the accordion content.

Why and How

The Accordion Component is designed to enhance the user experience by allowing large amounts of content to be organized and displayed in a compact and intuitive manner. By providing a collapsible section, users can quickly scan through the available topics and expand only the sections they are interested in, reducing cognitive load and improving navigation.

The component leverages the power of the @radix-ui/react-accordion library, which ensures accessibility and consistent behavior across different browsers and devices. The use of Markdown parsing and rendering libraries (unified, remark-parse, remark-rehype, and rehype-react) enables the inclusion of Markdown content within the accordion sections, providing flexibility and seamless integration with existing Markdown-based documentation.

The DevDocsAccordion component serves as a convenient wrapper, abstracting away the complexities of setting up the individual accordion components and allowing developers to focus on providing the desired content. By following the provided usage instructions, developers can easily incorporate accordions into their Docusaurus projects, enhancing the overall documentation experience for their users.